<template>
	<div class="theme">
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div class="bgimg">
					<van-search v-model="value" :placeholder="$t('PropertyCrowdfunding.v13')" show-action shape="round" @search="onSearch" maxlength="20">
						<div slot="action" @click="onSearch">
							<van-icon :name="icon.kf" size="28" @click="forMy" />
						</div>
					</van-search>
				</div>
				<van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=" ">
					<van-tabs v-model="activeMain" swipeable @change="tabsChange">
						<van-tab :title="$t('PropertyCrowdfunding.v2')" name="1">
							<van-list v-model="loading" :finished="finished" @load="onLoad" :finished-text="$t('PropertyCrowdfunding.v14')">
								<div class="content-product" style="padding: 10px;background: white;margin-bottom: 10px;" @click="$router.push({path: '/PropertyDetails',query:{roid: 'CrowdFunding',projectId: item.projectId}})" v-for="(item,index) in list" :key="item.index">
									<van-image width="100%" height="100%" :src="item.picture" />
									<div style="padding: 10px 0px;">
										<span v-text="item.title">汤臣一品一栋二号楼70平方</span>
										<span style="float: right;font-size: 13px;color: #22a77b;" v-if="item.status == 1">{{$t('PropertyCrowdfunding.v4')}}</span>
										<span style="float: right;font-size: 13px;color: #f94951;" v-if="item.status == 2">{{$t('PropertyCrowdfunding.v5')}}</span>
									</div>
									<div style="padding: 10px 0px;">
										<van-progress v-if="item.ratio" :percentage="Number(parseFloat(Number(item.ratio * 100)).toFixed(3).slice(0,-1))" color="#22a77b" />
										<van-progress v-if="!item.ratio" :percentage="0" color="#22a77b" />
									</div>
									<div style="padding: 10px 0px;font-size: 12px;">
										<span style="color:#22a77b;" v-text="parseFloat(item.pay).toFixed(5).slice(0,-1)">100</span>
										<span>{{$t('PropertyCrowdfunding.v12')}}USDT{{$t('PropertyCrowdfunding.v6')}}</span>
										<span style="float: right;" v-text="$t('PropertyCrowdfunding.v7') + item.validTotal + '人'">已参与1000人</span>
									</div>
								</div>
							</van-list>
						</van-tab>
						<van-tab :title="$t('PropertyCrowdfunding.v4')" name="2">
							<van-list v-model="loading" :finished="finished" @load="onLoad" :finished-text="$t('PropertyCrowdfunding.v14')">
								<div class="content-product" style="padding: 10px;background: white;margin-bottom: 10px;" @click="$router.push({path: '/PropertyDetails',query:{roid: 'CrowdFunding',projectId: item.projectId}})" v-for="(item,index) in list" :key="item.index" v-if="item.status == 1">
									<van-image width="100%" height="100%" :src="item.picture" />
									<div style="padding: 10px 0px;">
										<span v-text="item.title">汤臣一品一栋二号楼70平方</span>
										<span style="float: right;font-size: 13px;color: #22a77b;" v-if="item.status == 1">{{$t('PropertyCrowdfunding.v4')}}</span>
										<span style="float: right;font-size: 13px;color: #f94951;" v-if="item.status == 2">{{$t('PropertyCrowdfunding.v5')}}</span>
									</div>
									<div style="padding: 10px 0px;">
										<van-progress v-if="item.ratio" :percentage="Number(parseFloat(Number(item.ratio * 100)).toFixed(3).slice(0,-1))" color="#22a77b" />
										<van-progress v-if="!item.ratio" :percentage="0" color="#22a77b" />
									</div>
									<div style="padding: 10px 0px;font-size: 12px;">
										<span style="color:#22a77b;" v-text="parseFloat(item.pay).toFixed(5).slice(0,-1)">100</span>
										<span>{{$t('PropertyCrowdfunding.v12')}}USDT{{$t('PropertyCrowdfunding.v6')}}</span>
										<span style="float: right;" v-text="$t('PropertyCrowdfunding.v7') + item.validTotal + '人'">已参与1000人</span>
									</div>
								</div>
							</van-list>
						</van-tab>
						<van-tab :title="$t('PropertyCrowdfunding.v8')" name="3">
							<van-list v-model="loading" :finished="finished" @load="onLoad" :finished-text="$t('PropertyCrowdfunding.v14')">
								<div class="content-product" style="padding: 10px;background: white;margin-bottom: 10px;" @click="$router.push({path: '/PropertyDetails',query:{roid: 'CrowdFunding',projectId: item.projectId}})" v-for="(item,index) in list" :key="item.index" v-if="item.status == 2">
									<van-image width="100%" height="100%" :src="item.picture" />
									<div style="padding: 10px 0px;">
										<span v-text="item.title">汤臣一品一栋二号楼70平方</span>
										<span style="float: right;font-size: 13px;color: #22a77b;" v-if="item.status == 1">{{$t('PropertyCrowdfunding.v4')}}</span>
										<span style="float: right;font-size: 13px;color: #f94951;" v-if="item.status == 2">{{$t('PropertyCrowdfunding.v5')}}</span>
									</div>
									<div style="padding: 10px 0px;">
										<van-progress v-if="item.ratio" :percentage="Number(parseFloat(Number(item.ratio * 100)).toFixed(3).slice(0,-1))" color="#22a77b" />
										<van-progress v-if="!item.ratio" :percentage="0" color="#22a77b" />
									</div>
									<div style="padding: 10px 0px;font-size: 12px;">
										<span style="color:#22a77b;" v-text="parseFloat(item.pay).toFixed(5).slice(0,-1)">100</span>
										<span>{{$t('PropertyCrowdfunding.v12')}}USDT{{$t('PropertyCrowdfunding.v6')}}</span>
										<span style="float: right;" v-text="$t('PropertyCrowdfunding.v7') + item.validTotal + '人'">已参与1000人</span>
									</div>
								</div>
							</van-list>
						</van-tab>
					</van-tabs>
				</van-pull-refresh>
			</div>
		</div>
	</div>
</template>

<script>
	import { crowdfunding } from './../utils/api';
	import { debounce } from './../utils/debounce'; // 函数节流-高频操作需要
	let _this;
	export default {
		name: "Crowdfunding",
		data() {
			return {
				list: [],
				activeMain: 1,
				size: 10, //每页数量
				current: 1,
				total: '', //总数量
				listLength: '', //当前总数量
				isLoading: false,
				finished: false,
				loading: false,
				icon: {
					kf: localStorage.style.includes('black') ? require('../assets/images/kf2.png') : require('../assets/images/kf.png'),
				},
				value: ''
			}
		},
		beforeCreate() {
			_this = this;
		},
		created() {
			this.$watch('value', debounce((val) => { // 这里的 val 是输入的值
				if(val) { // 如果存在才执行
					this.onSearch(val);
				}else{
					this.value = '';
					this.onSearch(this.value);
				}
			}, 200));
		},
		mounted() {

		},
		methods: {
			getList() {
				crowdfunding.getProject({
					type: 0, // 类型：0 全部 1进行中 2已结束
					current: this.current,
					size: this.size
				}).then(res => {
					if(res.code == 200) {
						this.list = res.data.records;
						this.listLength = res.data.records.length;
						this.total = res.data.total;
						if(this.total > this.listLength) {
							this.size += 10;
							this.loading = false;
						} else {
							// 加载状态结束
							this.finished = true;
							this.loading = false;
						}
					}
				})
			},
			onRefresh() { // 下拉刷新
				this.getList();
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: _this.$t('MyDividend.v10')
					});
					this.isLoading = false;
				}, 500);
			},
			onLoad() { // 上拉加载
				this.getList();
			},
			back() {
				if(this.$route.query.roid) {
					this.$router.push({
						path: this.$route.query.roid
					})
				} else {
					this.$router.push({
						path: '/'
					})
				}
			},
			forMy() { // 前往我的项目和我的分红页面
				this.$router.push({
					path: '/ForMy'
				});
			},
			onClickLeft() {
				if(this.$route.query.roid) {
					this.$router.push({
						path: this.$route.query.roid
					})
				} else {
					this.$router.push({
						path: '/'
					})
				}
			},
			onSearch(e) {
				crowdfunding.getProject({
					type: this.activeMain - 1, // 类型：0 全部 1进行中 2已结束
					current: this.current,
					size: this.size,
					title: e
				}).then(res => {
					if(res.code == 200) {
						this.list = res.data.records;
						this.listLength = res.data.records.length;
						this.total = res.data.total;
						if(this.total > this.listLength) {
							this.size += 10;
							this.loading = false;
						} else {
							// 加载状态结束
							this.finished = true;
							this.loading = false;
						}
					}
				})
			},
			tabsChange(e) {
				crowdfunding.getProject({
					type: Number(e) - 1, // 类型：0 全部 1进行中 2已结束
					current: this.current,
					size: this.size,
					title: this.value
				}).then(res => {
					if(res.code == 200) {
						this.list = res.data.records;
						this.listLength = res.data.records.length;
						this.total = res.data.total;
						if(this.total > this.listLength) {
							this.size += 10;
							this.loading = false;
						} else {
							// 加载状态结束
							this.finished = true;
							this.loading = false;
						}
					}
				})
			}
		},
		filters: {}
	}
</script>

<style lang="less" scoped>
	.overlay {
		background: rgb(245, 245, 245);
	}
	
	.head {
		background: white;
		color: black;
	}
	
	.head .return:after {
		border-color: #000;
	}
	
	/deep/ .van-tab__pane,
	.van-tab__pane-wrapper {
		color: black;
	}
	
	/deep/ .van-tabs__line {
		background-color: rgb(60, 167, 109);
	}
	
	/deep/ .van-list__finished-text {
		padding-bottom: 10px;
	}
	
	/deep/ .van-hairline--top-bottom::after,
	.van-hairline-unset--top-bottom::after {
		border-width: 0;
	}
	
	/deep/ .van-search__action {
		line-height: 10px;
	}
	
	.van-pull-refresh {
		overflow: visible!important;
	}
	
	/deep/ .van-pull-refresh__head {
		position: fixed;
	}
</style>